 /* 拖拽相关样式 */
 /*包围div样式*/
 
 .box {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     overflow: hidden;
 }
 /*左侧div样式*/
 
 .left {
     width: 35%;
     /*左侧初始化宽度*/
     height: 100%;
     background: #FFFFFF;
     float: left;
     position: relative;
 }
 
 .left-reset {
     width: 50px !important;
 }
 /*拖拽区div样式*/
 
 .resize {
     cursor: col-resize;
     float: right;
     width: 3px;
     height: 100%;
 }
 
 .left .content {
     overflow: hidden;
     height: 100%;
     position: relative;
 }
 
 .left .content .top-bar {
     display: flex;
     align-items: center;
     padding: 0 25px 0 10px;
     height: 54px;
     background: #fff;
     border-bottom: 1px solid #eee;
 }
 
 .left .content .top-bar a {
     position: relative;
     bottom: 2px;
     width: 20px;
     min-width: 20px;
     margin-right: 15px;
     margin-left: 5px;
 }
 
 .left .content .top-bar a img {
     max-width: 100%;
     vertical-align: middle;
 }
 
 .left .content .course-name {
     width: calc(100% - 132px);
     overflow: hidden;
     font-size: 20px;
     color: #777;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
 .left-bar {
     width: 50px;
     height: 100%;
     border-right: 1px solid #eee;
 }
 
 .left-bar .menu-tabs {
     display: flex;
     flex-direction: column;
     padding-bottom: 10px;
 }
 
 .tab-item {
     z-index: 1;
     padding: 15px 0;
     cursor: pointer;
 }
 
 .inner {
     padding: 5px 0;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
 }
 
 .tab-icon {
     z-index: 2;
     width: 24px;
     height: 24px;
     background: url(../img/menu-icons-sprite.cc55197.png);
     background-position-x: -5px;
 }
 
 .tab-icon.active {
     background-position-x: 88px;
 }
 
 .tab-tip {
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
     display: none;
     width: 90px;
     height: 100%;
     padding-right: 12px;
     color: #fff;
     background: #2e7eee;
     border-radius: 0 50px 50px 0;
     font-size: 14px;
     transition: all 0.3s;
 }
 
 .tab-item:hover .tab-tip {
     display: flex;
     align-items: center;
     justify-content: flex-end;
 }
 
 .tab-item:hover .tab-icon {
     background-position-x: -63px;
 }
 
 .content-box {
     position: absolute;
     left: 50px;
     right: 0;
     top: 55px;
     bottom: 0;
     overflow-y: auto;
 }
 
 .content-box-data {
     min-height: 100%;
     padding: 20px 10px;
     position: relative;
 }
 
 .resizeBtn {
     position: absolute;
     display: flex;
     align-items: center;
     justify-content: center;
     right: 1px;
     width: 14px;
     height: 110px;
     background: #dedede;
     top: calc(50% - 55px);
     border-radius: 15px 0 0 15px;
     cursor: pointer;
     z-index: 1;
 }
 
 .resizeBtn-reset {
     right: -14px;
     border-radius: 0 15px 15px 0;
 }
 /*拖拽区鼠标悬停样式*/
 /*右侧div'样式*/
 
 .mid {
     float: left;
     width: 65%;
     /*右侧初始化宽度*/
     height: 100%;
     background: #000;
     box-shadow: -1px 4px 5px 3px rgba(0, 0, 0, 0.11);
 }
 
 .mid-reset {
     width: calc(100% - 50px) !important
 }
 /* 右侧样式 */
 
 .right {
     position: fixed;
     top: 0;
     right: 0;
     z-index: 2;
     display: flex;
     flex-direction: column;
     width: 0px;
     height: 100%;
     color: #fff;
     background: #555;
     transition: all 0.3s;
 }
 
 .right-show {
     width: 150px;
 }
 
 .toggle-btn {
     position: absolute;
     top: 150px;
     left: -22px;
     z-index: 1;
     width: 22px;
     height: 90px;
     padding-left: 5px;
     font-size: 16px;
     line-height: 90px;
     color: #fff;
     cursor: pointer;
     background: #555;
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
 }
 
 .right .top {
     width: 100%;
     height: 45px;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }
 
 .right .time {
     display: inline-block;
     width: 80px;
     margin-right: 5px;
     font-size: 30px;
     color: #fff;
 }
 
 .add-time-btn {
     padding: 0 8px;
     font-size: 12px;
     border: none;
     border-radius: 10px;
 }
 
 .btn-secondary {
     color: #fff;
     background-color: #6c757d;
     border-color: #6c757d;
 }
 
 .btn-secondary:hover {
     cursor: pointer;
     background-color: #5a6268;
     box-shadow: none!important;
     outline: none!important;
 }
 
 .modes {
     position: relative;
     display: flex;
     justify-content: space-around;
     align-items: center;
     height: 44px;
     padding: 0 10px;
     color: #fff;
     -webkit-animation: hideModes-data-v-047ca317 .5s;
     animation: hideModes-data-v-047ca317 .5s;
     left: 0;
     background: #616161;
 }
 
 .modes-btn {
     position: relative;
     padding: 10px 0;
     color: #eee;
     font-size: 16px;
     cursor: pointer;
     text-align: center;
     z-index: 1;
 }
 
 .divide {
     width: 110px;
     margin: 15px auto;
     border-top: 1px solid #fff;
     opacity: .35;
 }
 
 .stop-lab-btn {
     display: block;
     width: 80%;
     padding: 4px 0;
     margin: 0 auto;
     font-size: 14px !important;
     border-radius: 20px;
     color: #fff;
     background-color: #f66;
     border-color: #f66;
     cursor: pointer;
 }
 
 .stop-lab-btn:hover {
     color: #fff;
     background-color: #ff4040;
     border-color: #f33;
 }
 
 .right ul {
     width: 80%;
     margin: 0 auto;
     overflow: hidden;
 }
 
 .right ul li {
     display: flex;
     justify-content: space-around;
     padding: 10px 0;
     font-size: 14px;
     color: #eee;
     cursor: pointer;
 }
 
 .right ul li:hover {
     background: #616161;
 }
 
 .section-list {
     width: 80%;
     height: auto;
     margin: 0 auto;
 }
 
 .section-list li {
     padding: 10px 0;
     font-size: 14px;
     cursor: pointer;
     border-bottom: 1px solid #eee;
 }
 
 .section-list li:last-child {
     border-bottom: none
 }
 
 .section-list li:hover {
     opacity: 0.8;
 }
 
 .pdf-box {
     position: absolute;
     left: 10px;
     right: 10px;
     bottom: 20px;
     top: 20px;
 }
 
 .pdf-title {
     width: 100%;
     height: 44px;
     border-bottom: 1px solid #eee;
 }
 
 .pdf-content {
     width: 100%;
     min-height: calc(100% - 44px);
     overflow-y: auto;
     position: relative;
 }
 
 .pdf-content iframe {
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
 }